<template>
  <div
    v-loading="cardLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 1)"
    class="card-item-box"
  >
    <div v-if="cardConfig.isShowTabs" class="card-item-tabs">
      <el-tabs v-model="cunrrenTabIndex" @tab-click="handleClickTab">
        <template v-for="item in tabList">
          <el-tab-pane :key="item.key" :label="item.name" />
        </template>
      </el-tabs>
      <!-- <div v-if="cardConfig.isNewsList" class="tab-btn-item-box">
        <SelectModule
          ref="SelectModule"
          :select-list="selectList"
          @handlerSelectData="handleSelectDataChange"
        />
      </div> -->
    </div>
    <div
      v-if="isShowHeader"
      class="card-item-header"
      :style="styleConfig.headerStyle || {}"
    >
      <div class="title">
        {{ cardData.cardName }}
      </div>

      <div class="header-handler">
        <SelectItems
          :select-list="headerSelectList"
          @handlerSelectData="handleSelectDataChange"
        />
        <div v-if="cardData.headerBtnList" class="btn-item-box">
          <template v-for="item in cardData.headerBtnList">
            <el-button
              :key="item.id"
              size="small"
              class="btn-item"
              :type="item.type || 'primary'"
              :icon="item.icon || ''"
              @click="clickBtn(item)"
            >
              <span v-if="item.label" v-html="item.label" />
            </el-button>
          </template>
        </div>
      </div>
    </div>

    <div v-if="!cardConfig.hiddenSelectModule" class="card-select-module">
      <!-- <div class="card-select-title">数据筛选</div> -->
      <SelectModule
        v-if="!cardConfig.hiddenSelect"
        ref="SelectModule"
        :select-list="selectList"
        @handlerSelectData="handleSelectDataChange"
        @resetForm="resetForm"
        @itemChange="itemChange"
      />
      <!-- <div class="card-select-title" style="margin-bottom: 0; margin-top: 16px">
        数据列表
      </div> -->
      <div v-if="cardData.moduleBtnList" class="btn-item-box">
        <template v-for="item in handleModuleBtnList(cardData.moduleBtnList)">
          <el-button
            :key="item.id"
            size="small"
            class="btn-item"
            :type="item.type || 'default'"
            :icon="item.icon || ''"
            :plain="item.plain"
            @click="clickBtn(item)"
          >
            <span v-if="item.label" v-html="item.label" />
          </el-button>
        </template>
      </div>
    </div>

    <div v-if="tabsList && tabsList.length > 0" class="tabs-box">
      <template v-for="item in tabsList">
        <div
          :key="item.code"
          class="item-tabs"
          :class="{ active: item.code === tabsActive.code }"
          @click="clickTab(item)"
        >
          <span>{{ item.name }}</span>
        </div>
      </template>
    </div>

    <div
      v-loading="clickLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 1)"
      :class="[
        cardData.mainClass,
        { 'is-has-tabs': tabsList && tabsList.length }
      ]"
      :style="styleConfig.mainStyle || {}"
      class="card-item-main"
    >
      <div
        class="card-item-main-container"
        :style="styleConfig.mainContainerStyle || {}"
      >
        <div v-if="!isHasData(cardData)" class="no-data-box">
          <!-- <div class="no-data-text">暂无数据</div> -->
        </div>
        <component
          :is="cardData.cardType"
          v-else
          :ref="`${cardData.id}-ref`"
          :select-list="selectList"
          :container-id="cardData.id"
          :card-data="handlerData(cardData)"
          @clickBtn="clickBtn"
          @expandChange="handleExpandChange"
          @sortParams="handleSortChange"
          @selectionChange="handleSelectionChange"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </div>

    <CommonDialog
      :visible.sync="popData.visible"
      :title="popData.popTitle"
      :pop-config="popData.popConfig"
      :select-params="selectParams"
      :pop-data="popData.popData"
      @popClose="popClose"
      @popConfirm="popConfirm"
    >
      <component
        :is="popData.popType"
        :confirm-type="confirmType"
        :request-params="requestParams"
        :pop-data="popData.popData"
        :pop-config="popData.popConfig"
        :close="close"
        :confirm="confirm"
        :pop-id="popData.id"
        :select-params="selectParams"
        @onFinish="onFinish"
        @onClose="onClose"
      />
    </CommonDialog>
  </div>
</template>

<script>
import TableCard from '@/components/TableCard'
import SelectModule from '@/components/SelectModule'
import SelectItems from '@/components/SelectItems'
import PopItems from '@/components/PopItems'
import CommonDialog from '@/components/CommonDialog'
import { MessageBox } from 'element-ui'
import { arr2tree, newsListarr } from '@/utils'
import { mapGetters } from 'vuex'
// import NewsList from '@/views/carbonPolicy/newsFlashManage/components/NewsList'

export default {
  name: 'CardItems',
  components: {
    TableCard,
    SelectModule,
    SelectItems,
    CommonDialog,
    ...PopItems
    // NewsList
  },
  props: {
    // 外部参数
    outerParams: {
      type: Object,
      default: () => ({})
    },
    // 卡片配置
    cardConfig: {
      type: Object,
      default: () => ({})
    },
    // 表头配置
    headerConfig: {
      type: Array,
      default: () => []
    },
    // 筛选配置
    selectConfig: {
      type: Array,
      default: () => []
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // tabs配置
    tabList: {
      type: Array,
      default: () => []
    },
    // tabs配置选中
    tabsActive: {
      type: Object,
      default: () => ({})
    },
    // tabs配置
    tabsList: {
      type: Array,
      default: () => []
    },
    treeNodeData: {
      type: Object,
      default: () => ({})
    },
    // 动态筛选数据
    dynamicSelectList: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      // 懒加载
      cardLoading: false,
      clickLoading: false,
      // 筛选列表
      headerSelectList: [],
      // 筛选列表
      selectList: [],
      // 弹窗数据
      popData: {},
      confirm: false,
      close: false,
      // 卡片数据
      cardData: {},
      // 筛选参数
      selectParams: {},
      // 排序参数
      sortParams: {},
      // 分页参数
      paginationParams: {},
      // 默认排序查询参数
      defaultSortParams: {},
      // 是否首次调用列表
      initList: true,
      // 表格批量选中数据
      multipleList: [],
      // 请求参数
      requestParams: {},
      // 激活tab
      cunrrenTabIndex: '0',
      // 动态政策数据
      cardBonNewsList: [],
      // 弹框确认类型
      confirmType: '',
      isClickExpandChange: false
    }
  },
  computed: {
    ...mapGetters(['authList']),
    /**
     * 处理按钮显示
     */
    handleModuleBtnList() {
      return (list, type) => {
        const filterList =
          list.filter((e) => {
            if (e.authId) {
              return this.authList.find((f) => f.permission === e.authId)
            }
            return true
          }) || []

        return filterList
      }
    },
    /**
     * 是否显示头部
     */
    isShowHeader() {
      const { cardName, headerBtnList = [] } = this.cardConfig
      return (
        cardName && headerBtnList.length > 0 && this.headerSelectList.length > 0
      )
    },
    /**
     * 样式配置
     */
    styleConfig() {
      const { styleConfig } = this.cardConfig
      if (styleConfig) {
        return styleConfig
      }
      return {}
    },
    /**
     * 处理是否有数据
     */
    isHasData() {
      return (data) => {
        if (data.isNewsList) {
          return true
        }
        if (data.cardData && data.dataType === 'table') {
          return data.cardData.head
        }
        return false
      }
    },
    /**
     * 处理数据
     */
    handlerData() {
      return (data) => {
        if (data.cardData) {
          return data.cardData
        }
        return {}
      }
    }
  },
  watch: {
    dynamicSelectList: {
      handler(val) {
        if (val && val.length) {
          this.selectList = val || []
          this.$refs.SelectModule?.handleReset()
        }
      },
      deep: true,
      immediate: true
    },
    cardConfig: {
      handler(val) {
        this.initData();
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.cardData = Object.assign({}, this.cardConfig)
      this.sortParams = {}
      this.selectParams = {}
      this.paginationParams = this.cardData.paginationParams || {}
      this.defaultSortParams = this.cardData.defaultSortParams || {}
      this.selectList = []
      this.multipleList = []
      this.initSelectData()
    },
    /**
     * 初始化筛选数据
     */
    initSelectData() {
      this.cardLoading = true
      const selectArr = JSON.parse(JSON.stringify(this.selectConfig))
      const promiseList = []
      selectArr.forEach((e) => {
        if (e.selectPath) {
          promiseList.push(this.handleSelectPath(e))
        }
      })
      Promise.all(promiseList).then(() => {
        this.selectList = selectArr
        // 处理首次不需要查询列表的模块(字典管理)
        if (this.cardConfig.notInitData && this.initList) {
          this.initList = false
          this.cardLoading = false
          return
        }
        this.selectParams = this.getSelectParams(this.selectConfig)
        this.getData({}, 'init')
      })
    },
    /**
     * 处理筛选请求
     * @param {*} item 配置项
     */
    handleSelectPath(item) {
      const { selectPath, selectParams, dataProp } = item || {}
      return new Promise((resolve, reject) => {
        const params = {
          ...(selectParams || {})
        }
        const newPath = selectPath.split('.')
        let api = this.$api
        newPath.forEach((e) => {
          api = api[e]
        })
        api(params)
          .then((res) => {
            if (Number(res.code) === 1000 && res.data) {
              if (dataProp) {
                const { dataType, treeConfig, keyProp, nameProp, codeProp } =
                  dataProp
                const selectList =
                  dataType === 'resData'
                    ? res.data || []
                    : res.data[keyProp] || []

                item.optionList = treeConfig
                  ? arr2tree(selectList, treeConfig)
                  : selectList.map((e) => ({
                    ...e,
                    name: e[nameProp],
                    code: e[codeProp]
                  }))
              }
            } else if (res.msg) {
              this.$message({ type: 'error', message: res.msg })
            }
            resolve()
          })
          .catch(() => {
            item.optionList = []
            resolve()
          })
      })
    },
    /**
     * 点击切换按钮
     * @param {*} item 选项数据
     */
    clickTab(item) {
      if (item.code === this.tabsActive.code) {
        return
      }
      this.$parent.tabsActive = item
      this.sortParams = {}
      this.$nextTick(() => {
        this.getData({}, 'isRefeshTable')
      })
    },
    /**
     * 点击按钮
     * @param {*} item 配置项
     * @param {*} data 数据
     */
    clickBtn(item, data) {
      const {
        id,
        downType,
        downPath,
        clickConfig,
        clickType,
        needTreeNode,
        customRouter
      } = item || {}
      const tableDom = this.$refs[`${this.cardData.id}-ref`]
      // 展开收起表格
      if (clickType === 'expand-retract-table' && tableDom) {
        // 避免重复点击触发渲染
        if (
          !this.isClickExpandChange &&
          ((id === 'table-expand' && tableDom.defaultExpandAll) ||
            (id === 'table-retract' && !tableDom.defaultExpandAll))
        ) {
          this.isClickExpandChange = false
          return
        }
        tableDom.defaultExpandAll = id === 'table-expand'
        tableDom.refesh = false
        this.$nextTick(() => {
          tableDom.refesh = true
        })
        return
      }
      // 字典详情新增
      if (needTreeNode && !this.treeNodeData.id) {
        this.$message({ type: 'warning', message: '请选择所属字典！' })
        return
      }
      if (this.popConfig[id]) {
        const { showType, dataType } = this.popConfig[id]
        if (showType === 'confirm') {
          if (dataType === 'multipleList') {
            if (this.multipleList.length === 0) {
              this.$message({
                type: 'warning',
                message: '请选择需要处理的数据'
              })
              return
            }
            this.handleConfirm(this.popConfig[id], this.multipleList)
          } else {
            this.handleConfirm(this.popConfig[id], data)
          }
        } else {
          this.popData = {
            ...this.popConfig[id],
            popData: needTreeNode ? this.treeNodeData : data
          }
        }
      }

      if (clickConfig) {
        const { type, routerName, routerPath, paramsList = [] } = clickConfig
        if (type === 'router-skip') {
          const params = {}
          paramsList.forEach((key) => {
            params[key] = data[key]
          })
          if (routerName) {
            this.$router.push({
              name: routerName,
              params
            })
          } else if (routerPath) {
            this.$router.push({
              path: routerPath,
              query: params
            })
          }
          return
        }
      }

      if (downType === 'downloadFile') {
        const params = {}
        Object.keys(this.requestParams).forEach((key) => {
          if (!['page', 'limit'].includes(key)) {
            params[key] = this.requestParams[key] || ''
          }
        })
        this.$formatFile.downFilePost(downPath, params)
      }
      if (customRouter) {
        this.$emit('customRouter', item, data)
      }
    },
    /**
     * 处理确认框
     * @param config 配置
     * @param data 数据
     */
    async handleConfirm(config, data) {
      let {
        confirmHeader,
        confirmContent,
        splitProp,
        confirmButtonText,
        cancelButtonText,
        paramsProp,
        successMsg,
        path,
        idCode,
        disabledRules,
        propIsArray
      } = config || {}
      const params = {}
      let splitName = ''
      /** 不合理数据做处理 */
      if (disabledRules) {
        const { ruleList = [], tipsMsg } = disabledRules
        const newData = data.filter((dataItem) => {
          return !!ruleList.every((e) => e.value.includes(dataItem[e.prop]))
        })
        if (newData.length !== data.length) {
          this.$message.warning(tipsMsg)
          return
        }
      }

      if (paramsProp) {
        Object.keys(paramsProp).forEach((key) => {
          // 删除多个
          if (Object.prototype.toString.call(data) === '[object Array]') {
            params[key] = data.map((e) => e[paramsProp[key]])
            const splitNameList = data.map((e, i) => {
              let str = ''
              if (Array.isArray(splitProp)) {
                const strList = splitProp.map((s) => {
                  return `${e[s]}`
                })
                str = `<span style="color:#E6A23C;background: #F5F7FA;padding: 0 5px;">${strList.join('-')}</span>`
              } else {
                str = `<span style="color:#E6A23C;background: #F5F7FA;padding: 0 5px;">${e[splitProp]}</span>`
              }
              return str
            })
            splitName = `${splitNameList.join('，')}等${splitNameList.length}个`
          } else {
            // 删除单个
            params[key] = data[paramsProp[key]]
            let str = ''
            if (Array.isArray(splitProp)) {
              const strList = splitProp.map((s) => {
                return `${data[s]}`
              })
              str = `<span style="color:#E6A23C;background: #F5F7FA;padding: 0 5px;">${strList.join('-')}</span>`
            } else {
              str = `<span style="color:#E6A23C;background: #F5F7FA;padding: 0 5px;">${data[splitProp]}</span>`
            }
            splitName = str
          }
          if (propIsArray) {
            params[key] = [data[paramsProp[key]]]
          }
        })
      }
      let exists = false;
      if(config.dynamicConfirmContent != null && typeof config.dynamicConfirmContent === 'function') {
        const confirm = await config.dynamicConfirmContent(data);
        confirmContent = confirm.confirmContent
        exists = confirm.exist;
      }
      const hintMsg = confirmContent.replace('XXX', splitName)
      MessageBox.confirm(`${hintMsg}`, `${confirmHeader || ''}`, {
        confirmButtonText: `${confirmButtonText || '确认'}`,
        cancelButtonText: `${cancelButtonText || '取消'}`,
        customClass: 'set-max-height50',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      })
        .then(async () => {
          if (!path || exists) {
            return
          }
          try {
            const newPath = path.split('.')
            let api = this.$api
            newPath.forEach((e) => {
              api = api[e]
            })
            const res = await api(params)
            if (Number(res.code) === 1000) {
              this.$message({
                type: 'success',
                message: successMsg || '删除成功'
              })
              this.getData(this.$refs.SelectModule?.selectData || {})
              if (idCode === 'dict') {
                this.$emit('initTree')
              }
            } else if (res.msg) {
              if (!['900'].includes(res.code)) {
                this.$message({ type: 'error', message: res.msg })
              }
            }
          } catch (error) {
            //
          }
        })
        .catch(() => {})
    },
    /**
     * 弹窗取消
     * @param type 类型
     */
    popClose(type) {
      this.close = false
      this.popData.visible = false
      this.popData.popType = ''
    },
    /**
     * 弹窗确认
     * @param type 类型
     */
    popConfirm(type) {
      this.confirmType = type || ''
      this.confirm = !this.confirm
    },
    /**
     * 弹窗确认请求成功
     */
    onFinish(val) {
      if (val) {
        this.popData.visible = false
        this.confirm = false
        this.popData.popType = ''
        this.getData()
      }
      if (val === 'dict') {
        this.$emit('initTree')
      }
      this.$emit('onFinish')
    },
    /**
     * 弹窗确认请求成功
     */
    onClose(val) {
      this.popData.visible = false
      this.confirm = false
      this.popData.popType = ''
    },
    /**
     * 处理筛选数据变化
     * @param data 筛选数据
     * @param type 筛选数据
     */
    handleSelectDataChange(data, type) {
      this.sortParams = {}
      this.selectParams = Object.assign(this.selectParams, data)
      if (type !== 'init') {
        this.getData(data)
      }
    },
    /**
     * 处理筛选数据变化
     * @param data 筛选数据
     * @param type 筛选数据
     */
    resetForm(data, type) {
      this.sortParams = {}
      this.selectParams = Object.assign(this.selectParams, data)
      if (type !== 'init') {
        this.getData(data)
      }
    },
    /**
     * 处理批量选择数据
     * @param list 批量数据
     */
    handleSelectionChange(list) {
      this.multipleList = list && list.length > 0 ? list : []
    },
    /**
     * 处理展开变化
     * @param data 排序数据
     */
    handleExpandChange(data) {
      this.isClickExpandChange = true
    },
    /**
     * 处理排序变化
     * @param data 排序数据
     */
    handleSortChange(data) {
      this.sortParams = Object.assign(this.sortParams, data)
      const { page, limit } = this.requestParams || {}
      const obj = {}
      if (page || limit) {
        obj.page = page
        obj.limit = limit
      }
      this.getData(obj)
    },
    /**
     * 处理分页容量变化
     * @param data 分页数据
     */
    handleSizeChange(data, type) {
      this.getData(data, type)
    },
    /**
     * 处理分页页码变化
     * @param data 分页数据
     */
    handleCurrentChange(data, type) {
      this.getData(data, type)
    },
    /**
     * 切换tab
     * @param data tab数据
     */
    handleClickTab(tab) {
      this.$emit('handleClickTab', tab)
    },
    /**
     * 筛选表单change事件
     * @param selectData 筛选表单数据
     * @param prop 表单字段
     */
    itemChange(selectData, prop) {
      if (selectData && Object.keys(selectData).length) {
        this.$emit('selectChange', selectData, prop, this.selectList)
      }
    },
    /**
     * 设置表单默认值
     * @param selectData 筛选表单数据
     * @param prop 表单字段
     */
    setSelectModuleValue(selectData) {
      this.$refs.SelectModule?.setSelectData(selectData)
    },
    /**
     * 处理更新按钮
     * @param config 配置
     * @param cardData 数据
     */
    async handleUpdateModuleBtn(config, cardData) {
      const { id, path, labelStr } = config || {}
      const { moduleBtnList = [] } = cardData || {}

      try {
        const newPath = path.split('.')
        let api = this.$api
        newPath.forEach((e) => {
          api = api[e]
        })
        const res = await api({})
        if (Number(res.code) === 1000) {
          moduleBtnList.forEach((e) => {
            if (e.id === id) {
              this.$set(e, 'label', labelStr.replace('XXX', res.data))
            }
          })
        } else if (res.msg) {
          this.$message({ type: 'error', message: res.msg })
        }
      } catch (error) {
        //
      }
    },
    /**
     * 获取请求数据
     * @param obj 参数
     * @param type 类型
     */
    async getData(obj, type) {
      const {
        path,
        dataType,
        isMultiple,
        isTree,
        isNewsList,
        treeConfig,
        updateModuleBtn,
        tabBtnList
      } = this.cardData

      if (!path) {
        return
      }

      if (type === 'init') {
        this.cardLoading = true
      } else {
        this.clickLoading = true
      }

      const params = {
        ...(this.paginationParams || {}),
        ...(this.outerParams || {}),
        ...(this.defaultSortParams || {}),
        ...(this.sortParams || {}),
        ...(this.selectParams || {}),
        ...(obj || {})
      }
      if (this.tabsActive?.prop) {
        params[this.tabsActive.prop] = this.tabsActive.value
      }
      const cloneData = JSON.parse(JSON.stringify(this.cardConfig))
      if (
        dataType === 'table' &&
        cloneData.cardData &&
        this.headerConfig &&
        this.headerConfig.length > 0
      ) {
        cloneData.cardData.head = this.headerConfig
      }
      if (updateModuleBtn) {
        this.handleUpdateModuleBtn(updateModuleBtn, cloneData)
      }
      try {
        const newPath = path.split('.')
        let api = this.$api
        newPath.forEach((e) => {
          api = api[e]
        })
        const res = await api(params)
        if (Number(res.code) === 1000) {
          this.requestParams = params
          const { records = [], total = 0 } = res.data
          let treeList = []
          if (isTree) {
            treeList = arr2tree(records, {
              id: treeConfig.id,
              parentId: treeConfig.parentId,
              childrenKey: treeConfig.childrenKey || 'children'
            })
          }

          let newsList = []
          if (isNewsList) {
            if (type === 'accum') {
              const list = JSON.parse(JSON.stringify(records))
              this.cardBonNewsList = [...this.cardBonNewsList, ...list]
              newsList = newsListarr(this.cardBonNewsList)
            } else {
              this.cardBonNewsList = JSON.parse(JSON.stringify(records))
              newsList = newsListarr(records)
            }
            cloneData.cardData = {
              body: newsList,
              page: params.page,
              tabBtnList
            }
          }

          if (dataType === 'table') {
            cloneData.cardData = {
              head: this.headerConfig,
              body: isTree ? treeList : records,
              hidePagination: !params.page,
              total: total,
              page: params.page,
              limit: params.limit,
              sortOrder: params.sortOrder,
              sortColumn: params.sortColumn,
              isMultiple: isMultiple,
              isNotStripe: this.cardConfig.isNotStripe,
              defaultExpandAll: !!this.cardConfig.defaultExpandAll,
              isRefeshTable: type === 'isRefeshTable'
            }
          }
        } else if (res.msg) {
          this.$message({ type: 'error', message: res.msg })
        }
      } catch (error) {
        console.log(error)
        //
      }
      this.cardData = cloneData

      this.cardLoading = false
      this.clickLoading = false
    },
    /**
     * 获取筛选默认请求参数
     * @param config 筛选配置
     */
    getSelectParams(config) {
      const selectParams = {}
      config
        .filter((i) => i.defaultConfig && i.defaultConfig.value)
        .forEach((e) => (selectParams[e.prop] = e.defaultConfig.value))
      return { ...selectParams }
    }
  }
}
</script>

<style lang="scss" scoped>
.card-item-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #eee;
  background-color: #fff;

  .card-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background-color: #f9f9f9;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #eee;

    .title {
      color: #333;
      font-weight: bold;
      font-size: 18px;
    }

    .header-handler {
      display: flex;
    }

    .btn-item-box {
      display: flex;
      margin-left: 10px;
      color: var(--button-default-hover-color);
    }
  }

  .card-select-module {
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-bottom: 0;

    .btn-item-box {
      padding-top: 16px;
    }
  }

  .tabs-box {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-top: 20px;

    .item-tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      padding: 0 20px;
      cursor: pointer;
      color: #333;
      background-color: #fff;
      border-top: 1px solid #eee;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      &:first-child {
        border-left: 1px solid #eee;
        border-radius: 3px 0 0 0;
      }
      &:last-child {
        border-radius: 0 3px 0 0;
      }
      &.active {
        background-color: rgb(219,139,57);
        color: #fff;
        font-weight: 600;
      }
    }
  }

  .card-item-main {
    flex: 1;
    position: relative;

    .card-item-main-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    &.main-padding20 {
      padding: 20px;

      &.is-has-tabs {
        padding-top: 0;
      }

      .card-item-main-container {
        position: absolute;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
      }

      &.is-has-tabs .card-item-main-container {
        height: calc(100% - 20px);
      }
    }

    &.tab-main-padding {
      margin: 0;
      .card-item-main-container {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }

  .card-item-tabs {
    padding: 20px 20px 0 0;
    margin: 0;
    position: relative;
  }

  .tab-btn-item-box {
    position: absolute;
    top: 14px;
    right: 20px;

    .select-module-box {
      border-bottom: none;
    }
  }

  ::v-deep .el-tabs__header {
    margin: 0;
  }
}

.card-select-title {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #101011;
  line-height: 28px;
  margin-bottom: 16px;
}
</style>
